<script setup lang="ts">

import {computed, inject, provide, ref} from "vue";
import bonusBill from "@/api/finance/bonusBill.js";
import {Message} from "@arco-design/web-vue";
import {auth} from "@/utils/common";
import BaseInfo from "./WbbaseInfo.vue";
import CustomerFeeList from "./CustomerFeeList.vue";
import CostFeeList from "./CostFeeList.vue";
import BonusFeeList from "./BonusFeeList.vue";
const visible = ref(false)
const record = ref({})
const crudRef = inject('crudRef')
const onShow = async (data) => {
  record.value = data
  data.expense_audit = data.info?.expense_audit
  visible.value = true
}

const getRecord = async function () {
  let result = await bonusBill.read(record.value.id);
  record.value = result.data
  return record
}

provide('getRecord', getRecord)
provide('record', record)
defineExpose({onShow,getRecord})
</script>

<template>

  <a-drawer v-model:visible="visible" width="80%" v-if="visible" unmount-on-close :footer="false">
    <template #title>
      <div class="grid grid-cols-[minmax(0,1fr),auto] items-center">
        <div>#销售提成批次#{{ record.title }}</div>
      </div>
    </template>
    <a-space direction="vertical" class="w-full">
      <a-grid :cols="12" :colGap="6" :rowGap="6">
        <BaseInfo />
        <CustomerFeeList />
        <CostFeeList v-if="auth('finance:cost:index')" />
        <BonusFeeList v-if="auth('finance:bonus:index')" />
      </a-grid>
    </a-space>
  </a-drawer>
</template>